<template>
	<div id="discounts">
		<el-container>
			<div class="top">
				<el-input placeholder="请输入优惠券标题" clearable v-model="locating"></el-input>
				<el-select v-model="matter" clearable placeholder="请选择优惠券类型">
					<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-select v-model="statusd" clearable placeholder="请选择优惠券状态">
					<el-option v-for="item in optionk" :key="item.value" :label="item.label" :value="item.value">
					</el-option>
				</el-select>
				<el-button type="primary" icon="el-icon-search" @click="seek">查找</el-button>
				<el-button type="primary" icon="el-icon-edit" @click="dialogTableVisible=true">添加</el-button>
				<download-excel :data="tableData" :fields="daocu" name="discounts-manage.xls">
					<el-button type="primary" icon="el-icon-download">导出</el-button>
				</download-excel>
			</div>
			<el-main>
				<!-- 列表 -->
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column prop="id" sortable label="优惠券ID"></el-table-column>
					<el-table-column prop="name" label="优惠券名称"></el-table-column>
					<el-table-column prop="desc" label="介绍"></el-table-column>
					<el-table-column prop="tag" label="标签"></el-table-column>
					<el-table-column prop="min" label="最低消费">
						<template slot-scope="scope">
							<span>满{{scope.row.min}}可用</span>
						</template>
					</el-table-column>
					<el-table-column prop="discount" label="满减金额">
						<template slot-scope="scope">
							<span>满{{scope.row.discount}}可用</span>
						</template>
					</el-table-column>
					<el-table-column prop="limit" label="每人限领"></el-table-column>
					<el-table-column prop="goodsType" label="商品使用范围">
						<template slot-scope="scope">
							<span v-if="scope.row.goodsType==0">全场通用</span>
							<span v-if="scope.row.goodsType==1">指定分类</span>
							<span v-if="scope.row.goodsType==2">指定商品</span>
						</template>
					</el-table-column>
					<el-table-column prop="type" label="优惠券类型">
						<template slot-scope="scope">
							<span v-if="scope.row.type==0">注册赠券</span>
							<span v-if="scope.row.type==1">通用领券</span>
							<span v-if="scope.row.type==2">兑换码</span>
						</template>
					</el-table-column>
					<el-table-column prop="total" label="优惠券数量">
						<template slot-scope="scope">
							<span v-if="scope.row.total==0">不限</span>
							<span v-else>{{scope.row.total}}</span>
						</template>
					</el-table-column>
					<el-table-column label="状态">
						<template slot-scope="scope">
							<span v-if="scope.row.status==0">正常</span>
							<span v-if="scope.row.status==1">已过期</span>
							<span v-if="scope.row.status==2">已下架</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" width="250px">
						<template slot-scope="scope">
							<el-button size="mini" type="primary"  @click="detailed(scope.$index, scope.row)">详情</el-button>
							<el-button size="mini" type="info"@click="compile(scope.row)">编辑</el-button>
							<el-button size="mini" type="danger" @click="deletes(scope.$index)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!-- 添加  编辑 -->
				<el-dialog :visible.sync="dialogTableVisible" width="40%">
					<el-form :model="form" label-position="left" style="padding-left: 60px !important;">
						<el-form-item label="优惠券名称" :label-width="formLabelWidth" :rules="[
					{ required: true, message: '优惠券名称不能为空', trigger: 'blur' }]">
							<el-input autocomplete="off" v-model="form.name"></el-input>
						</el-form-item>
						<el-form-item label="介绍" :label-width="formLabelWidth">
							<el-input autocomplete="off" v-model="form.desc"></el-input>
						</el-form-item>
						<el-form-item label="标签" :label-width="formLabelWidth">
							<el-input autocomplete="off" v-model="form.tag"></el-input>
						</el-form-item>
						<el-form-item label="最低消费" :label-width="formLabelWidth">
							<el-input placeholder="0" v-model="form.min">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="满减金额" :label-width="formLabelWidth">
							<el-input placeholder="0" v-model="form.discount">
								<template slot="append">元</template>
							</el-input>
						</el-form-item>
						<el-form-item label="每人限领" :label-width="formLabelWidth">
							<el-input placeholder="1" v-model="form.limit">
								<template slot="append">张</template>
							</el-input>
						</el-form-item>
						<el-form-item label="发布类型" :label-width="formLabelWidth">
							<el-select v-model="form.type" placeholder="通用领劵" clearable>
								<el-option label="通用领劵" value="0"></el-option>
								<el-option label="注册赠券" value="1"></el-option>
								<el-option label="兑换码" value="2"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="优惠券数量" :label-width="formLabelWidth">
							<el-input placeholder="请输入内容" v-model="form.total">
								<template slot="append">张</template>
							</el-input>
						</el-form-item>
						<el-form-item label="有效期" :label-width="formLabelWidth">
							<template>
								<el-radio-group v-model="radio" size="medium">
									<el-radio-button label="领券相对天数"></el-radio-button>
									<el-radio-button label="指定绝对时间"></el-radio-button>
								</el-radio-group>
							</template>
						</el-form-item>
						<el-form-item :label-width="formLabelWidth" v-show="radio=='领券相对天数'">
							<template>
								<el-input placeholder="请输入内容" v-model="form.days" style="width: 50%;">
									<template slot="append">天</template>
								</el-input>
							</template>
						</el-form-item>
						<!-- 日期时间 -->
						<el-form-item :label-width="formLabelWidth" v-show="radio=='指定绝对时间'">
							<template>
								<div>
									<el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间"
										style="width: 30%;">
									</el-date-picker>
									<span class="demonstration" style="padding-left: 15px;">至</span>
									<el-date-picker v-model="value2" type="datetime" placeholder="选择日期时间" align="right"
										style="width: 30%;" :picker-options="pickerOptions">
									</el-date-picker>
								</div>
							</template>
						</el-form-item>
						<el-form-item label="商品限制范围" :label-width="formLabelWidth">
							<template>
								<el-radio-group v-model="radio1" size="medium">
									<el-radio-button label="全场通用"></el-radio-button>
									<el-radio-button label="指定分类"></el-radio-button>
									<el-radio-button label="指定商品"></el-radio-button>
								</el-radio-group>
							</template>
						</el-form-item>
						<!-- 目前不支持 -->
						<el-form-item :label-width="formLabelWidth" v-show="radio1!='全场通用'">
							<template>
								<span>目前不支持</span>
							</template>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogTableVisible = false">取 消</el-button>
						<el-button type="primary" @click="addition()">确 定</el-button>
					</div>
				</el-dialog>
			</el-main>
			<!-- 分页 -->
			<el-footer>
				<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
					:page-sizes="[10, 20, 30, 40,50,100]" :page-size="10"
					layout="total, sizes, prev, pager, next, jumper" :total="paging">
				</el-pagination>
			</el-footer>
		</el-container>
	</div>
</template>

<script>
	import {
		yhjlist, //列表
		yhjchazao, //查找
		yhjtian,//添加
		yhjbian,//编辑
		yhjremove, //删除
		//分页
		yhjfen,
		yhjfeng
	} from "@/api/http.js"
	import moment from 'moment'
	export default {
		data() {
			return {
				tableData: [], //表格
				//查找
				locating: '', 
				matter: '', 
				statusd: '', 
				// 导出
				daocu: { 
					"优惠券ID": "id",
					"优惠券名称": "name",
					"介绍": "desc",
					"标签": "tag",
					"最低消费": "min",
					"满减金额": "discount",
					"每人限领": "limit",
					"商品使用范围": "goodsType",
					"优惠券类型": "type",
					"优惠券数量": "total"
				},
				dialogTableVisible: false, 
				formLabelWidth: '120px',
				uid: 0,
				pickerOptions: {}, //选择日期时间
				radio: '领券相对天数',
				radio1: '全场通用',
				status: null, //优惠卷状态
				size: 1,
				limit: 10,
				value1: '',
				value2: '',
				form: {
					name: '', //优惠券名称
					desc: '', //介绍
					tag: '', //标签
					min: '', //最低消费
					limit: 0, //每人限领
					type: '', //分发类型
					discount: '', //满减金额
					goodsType: 0, //商品使用范围
					goodsValue: [], //商品值，默认空数组
					days: null, //天数
					total: '', //优惠券数量
					status: '' //状态
				},
				options: [{
					value: 0,
					label: '调用领券'
				}, {
					value: 1,
					label: '注册赠券'
				}, {
					value: 2,
					label: '兑换码'
				}],
				// value: '',
				optionk: [{
					value: 0,
					label: '正常'
				}, {
					value: 1,
					label: '已过期'
				}, {
					value: 2,
					label: '已下架'
				}],
				value: '',
				paging: 0 //分页
			}
		},
		created() {
			// 数据渲染
			this.bloated()
		},
		watch: { //清空添加框
			dialogTableVisible() {
				if (!this.dialogTableVisible) {
					this.form.name = "" //清空优惠券名称
					this.form.desc = "" //介绍
					this.form.tag = "" //标签
					this.form.min = "" //最低消费
					this.form.discount = "" //满减金额
					this.form.limit = "" //每人限领
					this.form.total = "" //优惠券数量
				}
			}
		},
		methods: {
			// 获取数据
			bloated() {
				yhjlist().then((res) => {
					this.tableData = res.data.data.list
					this.paging = res.data.data.total
					// console.log(res.data.data.list) //测试
				})
			},
			// 查找管理员
			seek() {
				yhjchazao(this.locating, this.matter, this.statusd).then(res => {
					this.tableData = res.data.data.list //更新页面数据
				})
			},
			// 跳转详细页面
			detailed(index, row) {
				this.$router.push({
					path: '/promotion/details',
					query: {
						id: row.id
					}
				})
			},
			compile(row) { // 修改角色
				// me(row)
				this.uid = row.id
				if (this.uid) {
					this.form.name = row.name //优惠券名称
					this.form.desc = row.desc //介绍
					this.form.tag = row.tag //标签
					this.form.min = row.min //最低消费
					this.form.discount = row.discount //满减金额
					this.form.total = row.total //优惠券数量
					this.form.limit = row.limit //每人限领
					this.form.days = row.days //天数
					if (row.status == 0) {
						this.form.status = "正常"
					}
					if (row.status == 1) {
						this.form.status = '已过期'
					}
					if (row.status == 2) {
						this.form.status = '已下架'
					}
					if (row.goodsType == 0) {
						this.radio1 = "全场通用"
					}
					if (row.goodsType == 1) {
						this.radio1 = "指定分类"
					}
					if (row.goodsType == 2) {
						this.radio1 = "指定商品"
					}
				}
				this.dialogTableVisible = true;
			},
			addition() { //修改角色
				let status = 0
				let value1 = moment(this.value1).format("YYYY-MM-DD hh:mm:ss")
				let value2 = moment(this.value2).format("YYYY-MM-DD hh:mm:ss")
				if (this.form.status == 1) {
					status = 1
				}
				if (this.form.status == 2) {
					status = 2
				}
				if (this.uid) {
					let data = {
						id: this.uid,
						name: this.form.name, //优惠券名称
						desc: this.form.desc, //介绍
						days: this.form.days, //天数
						min: this.form.min, //最低消费
						discount: this.form.discount, //满减金额
						total: this.form.total, //优惠数量
						limit: this.form.limit, //每人限领
						tag: this.form.tag, //标签
						limit: 1, //每人限领
						goodsType: 0, //商品使用范围
						goodsValue: [], //商品值，默认空数组
						timeType: 1, //时间类型
						startTime: null, //开始时间
						endTime: null, //结束时间
						status: status, //状态
						type: 0 //类型
					}
					yhjbian(data).then(res => {
						// console.log(res)//测试
						if (res.data.errmsg == "成功") {
							this.$notify({
								title: '成功',
								message: '更新角色成功',
								type: 'success'
							});
							this.bloated();
						} else {
							this.$notify({
								title: '失败',
								message: '编辑失败',
								type: 'error'
							});
						}
					})
					this.dialogTableVisible = false; 
				} else { //添加角色
					let data = {
						id: this.uid,
						name: this.form.name, //优惠券名称
						desc: this.form.desc, //介绍
						days: this.form.days, //天数
						min: this.form.min, //最低消费
						discount: this.form.discount, //满减金额
						total: this.form.total, //优惠数量
						limit: this.form.limit, //每人限领
						tag: this.form.tag, //标签
						limit: 1, //每人限领
						goodsType: 0, //商品使用范围
						goodsValue: [], //商品值，默认空数组
						timeType: 1, //时间类型
						startTime: null, //开始时间
						endTime: null, //结束时间
						status: status, //状态
						type: 0 //类型
					}
					yhjtian(data).then(res => {
						// console.log(res)//测试
						if (res.data.errmsg == "成功") {
							this.$notify({
								title: '成功',
								message: '添加角色成功',
								type: 'success'
							});
							this.form.name = ""
							this.bloated(); 
							this.dialogTableVisible = false;
						} else {
							this.$notify({
								title: '失败',
								message: '添加失败',
								type: 'error'
							});
						}
					})
				}
			},
			//删除
			deletes(index) {
				let data = {
					id: this.tableData[index].id
				}
				yhjremove(data).then((res) => {
					// console.log(res)//测试
					this.$notify({
						title: '成功',
						message: '删除广告成功',
						type: 'success'
					});
					this.bloated();
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			// 分页
			handleCurrentChange(page) {
				yhjfen(page).then((res) => {
					// console.log(res)//测试
					this.tableData = res.data.data.list
				})
			},
			handleSizeChange(num) {
				yhjfeng(num).then((res) => {
					// console.log(res)//测试
					this.tableData = res.data.data.list
				})
			},
		}
	}
</script>

<style>
	#discounts .top {
		line-height: 40px;
		height: 40px !important;
		margin-bottom: 20px;
	}

	#discounts .top .el-input {
		width: 200px;
		margin-right: 10px;
	}

	#discounts .top .el-button {
		margin-right: 10px;
	}

	#discounts .top div {
		display: inline-block;
	}

	#discounts .el-main {
		padding-bottom: 5px;
	}

	#discounts .el-table__body tr .cell {
		text-align: center;
	}

	#discounts .has-gutter tr th {
		text-align: center;
	}

	#discounts .el-footer {
		border-bottom: 0px;
	}

	#discounts .el-form-item {
		font-weight: 700;
		color: #373737;
	}

	#discounts .el-form-item .el-input {
		width: 60%;
	}

	#discounts .avatar-uploader .el-upload {
		border: 1px dashed #d9d9d9;
		border-radius: 6px;
		cursor: pointer;
		position: relative;
		overflow: hidden;
	}

	#discounts .avatar-uploader .el-upload:hover {
		border-color: #409EFF;
	}

	#discounts .avatar-uploader-icon {
		font-size: 25px;
		color: #8c939d;
		width: 100px;
		height: 100px;
		line-height: 100px;
		text-align: center;
	}

	#discounts .avatar {
		width: 100px;
		height: 100px;
		display: block;
	}
</style>
